<template>
  <CommonCard title="今日销售额" :count="echartStore.storeEchartData.salesToday">
    <template #main>
      <div class="content">
        <span class="mr-5">日同比</span>
        <span class="mr-5">{{ echartStore.storeEchartData.salesGrowthLastDay }}</span>
        <span
          :class="{
            down: echartStore.storeEchartData.salesGrowthLastDay < 0,
            up: echartStore.storeEchartData.salesGrowthLastDay > 0
          }"
        ></span>
      </div>
      <div class="content">
        <span class="mr-5">月同比</span>
        <span class="mr-5">{{ echartStore.storeEchartData.salesGrowthLastMonth }}</span>
        <span
          :class="{
            down: echartStore.storeEchartData.salesGrowthLastMonth < 0,
            up: echartStore.storeEchartData.salesGrowthLastMonth > 0
          }"
        ></span>
      </div>
    </template>
    <!-- 下半部分 -->
    <template #buttom>
      <span class="mr-10">昨日销售额</span>
      <span>{{ echartStore.storeEchartData.salesLastDay }}</span>
    </template>
  </CommonCard>
</template>

<script setup lang="ts">
// 导入store
import useEchartStore from '@/stores/echart'

// 获取仓库实例
const echartStore = useEchartStore()
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #888;
}
</style>
